mp3 = ["music/城南花已开.mp3", "music/所念皆星河.mp3", "music/星茶会.mp3"];
number = 0;
playtime = 0;
img = ["img/城南花已开.jpg", "img/所念皆星河.jpg", "img/星茶会.jpg"];
mp3name = ["城南花已开", "所念皆星河", "星茶会"];
mp3length = ["271s", "220s", "196s"];

function a() {
	music = document.getElementById("music");
	button = document.getElementById("button");
	photo = document.getElementById("photo");
	progress = document.getElementById("progress");
	if (music.paused) {
		playsong();
		progress.style.animationPlayState = "running";
	} else {
		pausedsong();
		progress.style.animationPlayState = "paused";

	}
}

function next() {
	number++;
	if (number < mp3.length) {
		photo.src = img[number];
		music.src = mp3[number];
		music.play();
		if (progress.style.animationName == "progress") {
			progress.style.animationName = "progress2";
		}else{
			progress.style.animationName = "progress";
		}
		p();
	} else {
		number = 0;
		playsong();
		photo.src = img[number];
		if (progress.style.animationName == "progress") {
			progress.style.animationName = "progress2";
		}else{
			progress.style.animationName = "progress";
		}
		p();
	}
}

function playsong() {
	var name = document.getElementsByClassName("name");
	music.src = mp3[number];
	music.currentTime = playtime;
	music.play();
	p();

}

function pausedsong() {

	playtime = music.currentTime;
	music.pause();
	y();

}

function y() {
	var name = document.getElementsByClassName("name");
	button.className = "pause";
	photo.style.animationDuration = "0s";
	progress.style.animationPlayState = "paused";
	if (name) {
		for (var x = 0; x < name.length; x++) {
			name[x].style.visibility = "hidden";
		}
	}
}

function p() {
	var name = document.getElementsByClassName("name");
	var text = document.getElementById("text");
	text.innerHTML = mp3name[number];
	photo.style.animationDuration = "8s";
	progress.style.animationDuration = mp3length[number];

	button.className = "play";
	if (name) {
		for (var x = 0; x < name.length; x++) {
			name[x].style.visibility = "visible";
		}
	}
}

function previous() {
	number--;
	if (number > 0 && number < 3) {
		photo.src = img[number];
		music.src = mp3[number];
		music.play();
		if (progress.style.animationName == "progress") {
			progress.style.animationName = "progress2";
		}else{
			progress.style.animationName = "progress";
		}
		p();
	} else {
		number = 2;
		playsong();
		photo.src = img[number];
		if (progress.style.animationName == "progress") {
			progress.style.animationName = "progress2";
		}else{
			progress.style.animationName = "progress";
		}
		p();
	}
}
